<template>
  <div>
    <mt-navbar v-model="selected" fixed> <!-- // 0已创建 1已取消 2已删除 3已付款 4已发货 5已收货 -->
      <mt-tab-item id="100">全部</mt-tab-item>
      <mt-tab-item id="0">待付款</mt-tab-item>
      <mt-tab-item id="3">待发药</mt-tab-item>
      <mt-tab-item id="4">待收药</mt-tab-item>
      <mt-tab-item id="5">已收药</mt-tab-item>
    </mt-navbar>


    <p class="y_c_input">
      <input type="text" placeholder="输入处方号、医生名称查询" v-model="recordKey">
    </p>


    <!-- tab-container -->
    <mt-tab-container v-model="selected">


      <!-- 全部 100 -->
      <mt-tab-container-item id="100">
        <section class="yaofang_content" v-infinite-scroll="loadMore1" infinite-scroll-disabled="busy"
          infinite-scroll-distance="10"
        >
          <ul>
            <li v-for="item in list" :key="item.COUNTNUM">
              <prelist-option :selected="selected" :itemjson="JSON.stringify(item)" @deletePayF="deletePay($event)" @queren="queren($event)"></prelist-option>
            </li>
          </ul>
          <p v-if="list" class="loadingT">没有更多数据</p>
        </section>
      </mt-tab-container-item>


      <!-- 待付款 0 -->
      <mt-tab-container-item id="0">
        <section class="yaofang_content">
          <ul>
            <li v-for="item in list" :key="item.COUNTNUM">
              <prelist-option :selected="selected" :itemjson="JSON.stringify(item)" @deletePayF="deletePay($event)"></prelist-option>
            </li>
          </ul>
          <p v-if="list" class="loadingT">没有更多数据</p>
        </section>
      </mt-tab-container-item>


      <!-- 待发药 3 -->
      <mt-tab-container-item id="3">
        <section class="yaofang_content">
          <ul>
            <li v-for="item in list" :key="item.COUNTNUM">
              <prelist-option :selected="selected" :itemjson="JSON.stringify(item)"></prelist-option>
            </li>
          </ul>
          <p v-if="list" class="loadingT">没有更多数据</p>
        </section>
      </mt-tab-container-item>


      <!-- 待收药 4 -->
      <mt-tab-container-item id="4">
        <section class="yaofang_content">
          <ul>
            <li v-for="item in list" :key="item.COUNTNUM">
              <prelist-option :selected="selected" :itemjson="JSON.stringify(item)" @queren="queren($event)"></prelist-option>
            </li>
          </ul>
          <p v-if="list" class="loadingT">没有更多数据</p>
        </section>
      </mt-tab-container-item>


      <!-- 已收药 5 -->
      <mt-tab-container-item id="5">
        <section class="yaofang_content">
          <ul>
            <li v-for="item in list" :key="item.COUNTNUM">
              <prelist-option :selected="selected" :itemjson="JSON.stringify(item)"></prelist-option>
            </li>
          </ul>
          <p v-if="list" class="loadingT">没有更多数据</p>
        </section>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
import prelistOption from '~/components/list/components/prelist_option';

import { Toast, MessageBox } from 'mint-ui';

export default {
  data() {
    return {

      ts: this.newStore(),
      tq: this.getData(),

      orderStatus: '未付款',
      ybinfo: '医保',

      patientid: '10607', // 测试数据, 当针对某一个具体的就诊人查看处方订单列表时，再查看打开此参数
      selected: '100',
      queren1: '确认收货',
      headTitle: '我的药方',
      alertText: '删除成功！',
      showAlert: false,
      list: [],
      alllist: [],
      busy: true,
      page: 1,
      loadingText: '',
      recordKey: '',
    };
  },
  components: {
    prelistOption,
  },
  watch: {
    selected() {
      this.page = 1; // 切换选择卡，起始回复到第一页
      this.list = []; // 切换选项卡，数据重新获取
      this.getallprescribeOrderList();
    },
    recordKey() {
      this.page = 1; // 切换选择卡，起始回复到第一页
      this.list = []; // 切换选项卡，数据重新获取
      this.getallprescribeOrderList();
    },
  },
  created() {
    this.patientid = ''; // 测试数据
  },
  mounted() {
    this.getallprescribeOrderList();
  },
  methods: {

    loadMore1() {
      this.busy = true;
      setTimeout(() => {
        this.page += 1;
        this.getallprescribeOrderList();
      }, 500);
    },

    queren(id) {

      console.log('queren id' + id);
      MessageBox.confirm('是否确认收货？', '提示').then(
        action => { // 确认

        const DATA = { orderId: id };
        this.tq.queren(DATA,this).then((ts) => {
          this.showAlert = true;
          this.alertText = '确认成功';
          this.page = 1;
          this.list = [];
          this.getallprescribeOrderList();
        });

      }, action => { // 取消
        Toast({
          message: '已取消收货',
          duration: 1000,
        });
      });



    },

    getallprescribeOrderList() {
      const DATA = {
        patientId: this.patientid,
        ordstatus: this.selected == '100' ? '' : this.selected,
        keywords: this.recordKey,
        rowsperpage: '10',
        page: `${this.page}`,
        ordercolumn: 'opentime',
        ordertype: 'desc',
      };
      this.tq.getallprescribeOrderList(DATA,this).then((ts) => {
        this.list = this.list.concat(ts.d.DATAOBJ.DATA);
        if (ts.d.DATAOBJ.DATA.length == 0) {
          this.busy = true;
          this.loadingText = '没有更多数据';
        } else {
          this.busy = false;
          this.loadingText = '加载中...';
        }
      });
    },

    closeTip() {
      this.showAlert = false;
    },

    deletePay(id) {
      const Mes2 = window.confirm('是否删除订单？');
      if (Mes2) {
        const DATA = { orderId: id, ordstatus: '1' };
        this.tq.deletePay(DATA,this).then((ts) => {
          this.list.splice(0, 1);
          this.showAlert = true;
          this.alertText = '删除成功！';
        });
      }
    },

  },
};
</script>

<style lang="stylus" scoped>
.mint-tab-container-item
  flex-shrink: 0;
  width: 100%;
  margin-top: 2rem;
/* 以上为升级后的样式 */
.mint-navbar
  background #fff  /* #26a2ff */
  a
    color #fff
.mint-tab-item-label
  font-size 1rem
.mint-navbar .mint-tab-item.is-selected
  border-bottom: 3px solid #26a2ff
  margin-bottom 1px
  color #26a2ff
.mint-navbar a
  color: #666
.c_c_search{
  position: fixed;
  z-index: 500;
  right: 5%;
  top: 0;
}
.c_c_search i{
  font-size: 1.8rem;
  color:#fff
}
.loadingT{
  text-align: center;
  color: #ccc;
  /* background:#fff; */
  height: 2rem;
  line-height: 2rem;
  font-size:0.9rem
}
.empty_data {
  text-align: center;
}
.c_content {
  background: #fff;
}
.c_navbar {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 0.6rem;
  border-bottom: 1px solid #ebebeb;
  position: fixed;
  top: 2.8rem;
  width: 100%;

}
.nonelist {
  text-align: center;
  color: #666;
  font-family: "Microsoft Yahei";
}
.c_nav div {
  flex: 1;
  text-align: center;
}
.c_nav span {
  padding: 0.4rem;
  color: #666;
  font-family: "Microsoft Yahei";
}
.c_nav_active {
  border-bottom: 2px solid #3190e8;
}
.yaofang_content {
  /* background: #f8f9fa; */
  margin: 0 0 3.2rem 0;
  padding: 3.7rem 0.5rem 0.5rem 0.5rem;
}
.yaofang_content ul li {
  margin-top: 0.5rem;
  background-color: #fff;
  padding: 1rem;
  border-radius: 15px;
}
.yaofang_content p {
  margin-bottom: 0.5rem;
}
.y_c_input input{
  width: 95%;
  border: none;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  font-family: "Microsoft Yahei";
  padding-right: 2rem;
  border-radius: 15px;
  text-indent: 1.6rem;
  background: #fff;
}
.y_c_input{
  margin: 3rem 0% 0 0%;
  width: 100%;
  position: fixed;
  z-index: 2000;
  background: #fff;
}
.y_c_input i{
  position: absolute;
  top: 10%;
  right: 3%;
  font-size: 1.8rem;
  color:#ccc;
  display: inline-block
}
.loadmore {
  text-align: center;
  color: #aaa;
  line-height: 2rem;
}
</style>

